<template>
  <el-main :style="{ height: mianHeight + 'px' }">
    <!-- 数量统计 -->
    <el-row
      :gutter="20"
      type="flex"
      justify="center"
      style="margin-bottom: 40px"
    >
      <el-col :span="6">
        <div class="show-header" style="background: rgb(45, 183, 245)">
          <div class="show-num">{{ total.departmentCount }}</div>
          <div class="bottom-text">科室总数</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="show-header" style="background: rgb(237, 64, 20)">
          <div class="show-num">{{ total.sysUserCount }}</div>
          <div class="bottom-text">医生总数</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="show-header">
          <div class="show-num">{{ total.wxUserCount }}</div>
          <div class="bottom-text">患者总数</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="show-header" style="background: rgb(255, 153, 0)">
          <div class="show-num">{{ total.visitCount }}</div>
          <div class="bottom-text">就诊次数</div>
        </div>
      </el-col>
    </el-row>
    <div style="display: flex">
      <div style="flex-grow: 1; margin-right: 15px; flex: 1">
        <el-card class="box-card" style="margin-top: 30px">
          <div slot="header" class="clearfix">
            <span style="color: #000000; font-weight: 600; margin-bottom: 10px"
              >公告列表</span
            >
            <el-divider></el-divider>
          </div>
          <el-timeline>
            <el-timeline-item
              v-for="item in notice"
              :timestamp="item['createTime']"
              placement="top"
            >
              <el-card>
                <h4>{{ item["noticeTitle"] }}</h4>
                <p>{{ item["noticeText"] }}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </div>
      <div style="flex-grow: 1; margin-left: 15px; flex: 1">
        <el-card v-if="strore.getType == '0'" class="box-card" style="margin-top: 30px">
          <div slot="header" class="clearfix">
            <span style="color: #000000; font-weight: 600; margin-bottom: 10px"
              >我的排班
              <el-button type="primary" size="small" @click="getMySchedule('1')"
                >本周</el-button
              >
              <el-button type="warning" size="small" @click="getMySchedule('2')"
                >下周</el-button
              >
              <el-button type="success" size="small" @click="getMySchedule('3')"
                >上周</el-button
              >
              
            </span>
            <el-divider></el-divider>
          </div>
          <el-table :data="schedule" border stripe>
            <el-table-column prop="doctorName" label="姓名"></el-table-column>
            <el-table-column prop="times" label="日期"></el-table-column>
            <el-table-column prop="week" label="星期"></el-table-column>
            <el-table-column prop="type" label="是否上班">
              <template #default="scope">
                <el-tag v-if="scope.row.type == '0'" type="danger" size="normal"
                  >休息</el-tag
                >
                <el-tag
                  v-if="scope.row.type == '1'"
                  type="success"
                  size="normal"
                  >上班</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column prop="amount" label="放号数量"></el-table-column>
            <el-table-column prop="lastAmount" label="余号"></el-table-column>
          </el-table>
        </el-card>
        <el-card v-if="strore.getType == '1'" class="box-card" style="margin-top: 30px; flex: 1">
        <div slot="header" class="clearfix">
          <span
            style="
              color: #000000;
              font-weight: 600;
              margin-bottom: 10px;
              margin-left: 15px;
            "
            >日历</span
          >
          <el-divider></el-divider>
        </div>
        <el-calendar v-model="value" />
      </el-card>
      </div>
    </div>
  </el-main>
</template>
<script setup lang="ts">
import { ref, nextTick, onMounted, reactive } from "vue";
import {
  getHomeTotalApi,
  getIndexNoticeApi,
  getMyScheduleApi,
} from "../../api/home/index";
import { userStore } from "../../store/user/index";

const value = ref(new Date());
const mianHeight = ref(0);

const strore = userStore();
//统计
const total = reactive({
  departmentCount: 0,
  sysUserCount: 0,
  wxUserCount: 0,
  visitCount: 0,
});
const getHomeTotal = async () => {
  let res = await getHomeTotalApi();
  if (res && res.code == 200) {
    Object.assign(total, res.data);
  }
};
//通知列表
const notice = ref([]);
const getIndexNotice = async () => {
  let res = await getIndexNoticeApi();
  if (res && res.code == 200) {
    notice.value = res.data;
  }
};
//我的排班
const schedule = ref([]);
const getMySchedule = async (type: string) => {
  let res = await getMyScheduleApi({
    doctorId: strore.getUserId,
    type: type,
  });
  if (res && res.code == 200) {
    schedule.value = res.data;
  }
};
onMounted(() => {
  mianHeight.value = window.innerHeight - 100;
  getHomeTotal();
  getIndexNotice();
  getMySchedule("1");
  nextTick(() => {
    mianHeight.value = window.innerHeight - 100;
  });
});
</script>
<style scoped lang="scss">
.bottom-text {
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.1);
  height: 25px;
  line-height: 25px;
  text-align: center;
  position: absolute;
  font-weight: 600;
}
.show-header {
  background: #00c0ef;
  color: #fff;
  height: 80px;
  border-radius: 5px;
  position: relative;
}
.show-num {
  font-size: 38px;
  font-weight: 600;
  padding: 5px;
}
</style>
